<template>
	<view class="lost-content">
		
		<!-- 最新帖子内容 -->
		<u-list @scrolltolower="scrolltolower" v-if="postList.length!=0">
			<u-list-item
				v-for="(item, index) in postList"
				:key="item.post.id"
			>
			<view class="box-post-content" @click="postsClick(item.post.id)">
				<u-row customStyle="margin-bottom: 8px">
					<u-col span="2">
						<u-avatar size="46" :src="item.user.avatar"></u-avatar>
					</u-col>
					<u-col span="10">
						<view>
							<u--text
								:text="item.user.nickname"
								type="primary"
								bold
								size="15"
							></u--text>
						</view>
						<view class="u-demo-block__content">
							<view style="flex: 25%;"><u-tag text="数计学院" size="mini" ></u-tag></view>
							<view style="flex: 12%;margin-left: 8rpx;"><u-tag text="19级" type="warning" size="mini"></u-tag></view>
							<view style="flex: 18%;margin-left: 8rpx;"><u-tag text="软件工程" type="success" size="mini" ></u-tag></view>
							<view style="flex: 18%;margin-left: 8rpx;"><u-tag :text="item.post.type | typeToStr()" type="error" size="mini"></u-tag></view>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="12">
						<u--text size="14" :lines="4" :text="item.post.content"></u--text>
					</u-col>
				</u-row>
				<view class="picture-content">
					<u-album v-if="item.post.imgUrls.length>0" :urls="item.post.imgUrls" multipleSize="100" :previewFullImage="false"></u-album>
				</view>
			</view>
			</u-list-item>
			<view v-if="flag" style="margin-bottom: 65px;">
				<u-divider text="我是有底线的" :dashed="true" lineColor="rgb(131 131 133)"></u-divider>
			</view>
		</u-list>
		<u-empty
				v-else
				text="暂无发布相关内容!"
				textSize="20"
				textColor="#8f99a3"
				iconColor="blue"
				iconSize="160"
				marginTop="10"
				mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty>
		<!-- 发布按钮 -->
		<view class="box-bottom">
			<view class="ap_bt" @click="publishPost()">
				<u-icon name="plus-circle-fill" color="#2979ff" size="44"></u-icon>
			</view>
		</view>
		<!-- 返回顶部组件 -->
		<u-back-top
			:scroll-top="scrollTop" 
			icon="http://106.13.239.254/icon/go_back.png"
			:iconStyle="iconStyle"
			top="400"
			customStyle="opacity: 0.9;">
		</u-back-top>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {getPostsList} from '@/utils/api.js'
	export default {
		data() {
			return {
				//src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				postList: [],
				flag: false,
				urls1: [
					'https://img2.baidu.com/it/u=2537118624,1658512245&fm=253&fmt=auto&app=138&f=JPEG?w=231&h=500',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					
				],
				scrollTop: 0,
				iconStyle: {
					width: '50rpx',
					height: '50rpx',
				},
				query: {pageNo: 1, pageSize: 10, type: 0},
				total: 0,
			}
		},
		options: {
			styleIsolation: 'shared' 
		},
		//监听下拉是否出现返回顶部组件
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(option) {
			this.query.type = parseInt(option.type)
			uni.setNavigationBarTitle({
				title: getApp().getTypeStr(option.type)
			})
			this.getList()
		},
		filters:{
			typeToStr(type){
				return getApp().getTypeStr(type)
			}
		},
		methods: {
			postsClick(id){
				uni.$u.route({
					url: 'pages/posts-details/posts-details',
					params: {
						id: id,
						type: this.query.type
					}
				})
			},
			getList(isLoad){
				if(isLoad != null) this.postList = []
				getPostsList({params: this.query}).then(res => {
					for (let i = 0; i < res.list.length; i++) {
						res.list[i].post.imgUrls = res.list[i].post.imgUrls!=null?res.list[i].post.imgUrls.split(","):[]
					}
					this.postList = this.postList.concat(res.list)
					this.total = res.total
					if(res.list.length == 0) this.flag = true
				}).catch(err => {
					getApp().globalData.toast[1].message = '加载数据失败'
					this.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {
							//回调
						}
					})
				})
			},
			scrolltolower() {
				//下拉加载
				if(!this.flag){
					this.query.pageNo++
					this.getList()
				}else {
					this.flag = true
				}
			},
			publishPost(){
				uni.$u.route(`/pages/publish-scenery/publish-scenery?type=${this.query.type}`);
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	
	/deep/ .u-tag-class {
		margin-left: 6rpx;
		width: 80rpx;
	}
	
	.lost-content {
		padding-top: 20rpx;
		min-height: 90vh;
		background-color: rgb(242, 242, 242);
		.box-post-content {
			margin: 16rpx 20rpx;
			padding: 18rpx 10rpx 30rpx 16rpx;
			border-radius: 16rpx;
			background-color: #fff;
			.picture-content {
				margin-top: 20rpx;
			}
		}
		.u-demo-block__content {
		    display: flex;
			justify-content: left;
			margin-top: 10rpx;
			.u-tag,.u-tag-class {
				margin-left: 6rpx;
				width: 80rpx;
			}
		}
		.box-bottom {
			position: fixed;
			bottom: 0px;
			width: 100%;
			height: 55px;
			background-color: #ffffff;
			text-align: center;
			border-top: 2px solid #cacaca;
			.ap_bt{
				width: 50px;
				margin: 0 auto;
				margin-top: -16px;
			}
		}
		
	}
</style>
